<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>ko-easyui doc | Navigation </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    


    <!-- stylesheets -->
    <link rel="stylesheet" href="/koeasyui/style/doc.css">

    <!-- favicon -->
    <link rel="icon" href="/koeasyui/images/favicon.ico">

    

  </head>
  <body>

   <script>window.__INITIAL_STATE__ = {"page":{"title":"Navigation","path":"usage-and-configuration/navigation.html","support":{"link_url":"https://gitee.com/ko-plugins/koeasyui/issues","link_text":"ko-easyui","text":"Didn't you find what are you looking for? <br /> Try searching again on the left menu or","navigation":true,"navigation_label":"SUPPORT AND badmati"}},"data":{"navigation":{"logo":{"text":"ko-easyui doc","type":"link","path":"index.html"},"main":[{"text":"概述","type":"link","path":"index.html"},{"text":"快速上手","type":"link","path":"get-started.html"}]}},"config":{"timezone":"UTC","root":"/koeasyui/","time_format":"HH:mm:ss","theme":"../node_modules/hexo-theme-doc","theme_config":{"swagger_ui":{"version":2,"permalinks":true,"api_explorer":true,"download":"Download specification","show_extensions":false,"deep_linking":true,"display_operation_id":false,"doc_expansion":"none"},"search":{"skip":false,"background":false,"route":"/lunr.json"},"favicon":"/images/favicon.ico","google_analytics":"UA-110411486-1","support":{"link_url":"https://gitee.com/ko-plugins/koeasyui/issues","link_text":"ko-easyui","text":"Didn't you find what are you looking for? <br /> Try searching again on the left menu or","navigation":true,"navigation_label":"SUPPORT AND badmati"}}}}</script>

    <div id="react-navigation-root"><div class="doc-navigation" data-reactroot=""><nav class="doc-navbar"><a href="/koeasyui/index.html" class="doc-navbar__logo"><img src="/koeasyui/images/logo.png" class="doc-navbar__logo__img"/><span class="doc-navbar__logo__text">ko-easyui doc</span></a><i class="dc-icon dc-icon--close dc-icon--interactive doc-sidebar-close doc-navbar__sidebar-close doc-navbar__sidebar-close--desktop"></i><i class="dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle doc-navbar__sidebar-toggle"></i></nav><nav class="doc-sidebar"><div class="doc-sidebar__vertical-menu"><i class="dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle doc-sidebar-toggle--primary doc-sidebar__vertical-menu__item"></i><i class="dc-icon dc-icon--search dc-icon--interactive doc-sidebar__vertical-menu__item doc-sidebar__vertical-menu__item--primary"></i></div><div class="doc-sidebar-content"><div class="doc-sidebar__search-form"></div><ul class="doc-sidebar-list"><li class="doc-sidebar-list__item doc-sidebar-list__item--label"><span class="">SUPPORT AND badmati</span></li><li class="doc-sidebar-list__item doc-sidebar-list__item--link"><a class="" href="https://gitee.com/ko-plugins/koeasyui/issues" target="_blank"><span>ko-easyui</span></a></li></ul></div></nav></div></div>
    <div class="doc-content">
  <div class="dc-page">
    <div class="dc-card">
      <div id="react-search-results-root"></div>
      <div id="page-content" class="doc-formatting">
        <h1 id="Navigation"><a href="#Navigation" class="headerlink" title="Navigation"></a>Navigation</h1><p>Navigation is fully customizable by updating the <code>navigation.yaml</code> file located in your <code>source/_data</code> folder.<br>Within that file you will describe how the <strong>navigation/menu</strong> links will be presented to the user.</p>
<p>Navigation entries are grouped by <strong>category</strong>.<br>There are two main navigation <strong>categories</strong>:</p>
<ul>
<li><strong>logo</strong>: used to define the values for the logo in the top navigation bar</li>
<li><strong>main</strong>: used to define the values showed in the left sidebar</li>
</ul>
<p>For each navigation item you <strong>must</strong> define a <code>type</code> and, depending on the <code>type</code>, other attributes such as <code>text</code> and/or <code>path</code>.</p>
<p>Each navigation item can have a special property called <code>children</code>, that, as you might have guessed, gives you the ability to “nest” navigation entries.</p>
<p><em>source/_data/navigation.yaml example</em></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">logo:</span></span><br><span class="line"><span class="attr">  text:</span> <span class="string">My</span> <span class="string">Documentation</span></span><br><span class="line"><span class="attr">  type:</span> <span class="string">link</span></span><br><span class="line"><span class="attr">  path:</span> <span class="string">index.html</span></span><br><span class="line"></span><br><span class="line"><span class="attr">main:</span></span><br><span class="line"><span class="attr">- text:</span> <span class="string">PROJECTS</span></span><br><span class="line"><span class="attr">  type:</span> <span class="string">label</span></span><br><span class="line"><span class="attr">- text:</span> <span class="string">My</span> <span class="string">Awesome</span> <span class="string">Projects</span></span><br><span class="line"><span class="attr">  type:</span> <span class="string">link</span></span><br><span class="line"><span class="attr">  path:</span> <span class="string">projects/my-awesome-project.html</span></span><br><span class="line"><span class="attr">  children:</span></span><br><span class="line"><span class="attr">  - text:</span> <span class="string">My</span> <span class="string">Awesome</span> <span class="string">Projects</span> <span class="string">Page</span> <span class="number">1</span></span><br><span class="line"><span class="attr">    type:</span> <span class="string">link</span></span><br><span class="line"><span class="attr">    path:</span> <span class="string">projects/my-awesome-project-page-1.html</span></span><br></pre></td></tr></table></figure>
<p>There are two <code>types</code> of navigation items:</p>
<ul>
<li><strong>label</strong>: navigation item as a label (it’s not an anchor so it doesn’t need a <code>path</code> value)</li>
<li><strong>link</strong>: navigation item as a link</li>
</ul>
<p><br>
The <code>path</code> value for a link navigation item is just the markdown <code>filepath</code>, but with <code>.html</code> as extension.</p>

        <div id="react-support-footer-root"></div>
      </div>
    </div>
  </div>
</div>


    

    <!-- js vendors -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lunr.js/2.1.0/lunr.min.js"></script>

    <!-- js source  -->
    <script src="/koeasyui/script/doc.js"></script>

    

  </body>
</html>
